<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>系统监控</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <style>
        .icon {
            font-size: 20px;
            color: #1E9FFF;
        }
    </style>
</head>
<body>
<div class="layui-btn-group" style="padding-top: 5px;padding-bottom: 5px;padding-left: 10px;">
    <a class="layui-btn layui-btn-primary layui-btn-sm" href="/"><i class="layui-icon">&#xe9aa;</i></a>
    <button class="layui-btn layui-btn-primary layui-btn-sm" onclick="server()"><i class="layui-icon">&#xe654;</i>
    </button>
</div>
<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
    {{range .}}
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">
                    <b>{{.Name}}&nbsp;&nbsp;</b>
                    <a href="javascript:;" onclick="upload({{.Name}})" title="上传">
                        <i class="layui-icon layui-icon-upload-drag icon" style="color: #1E9FFF;"></i>
                    </a>&nbsp;
                    <a href="javascript:;" onclick="logs({{.Name}})" title="查看日志">
                        <i class="layui-icon layui-icon-search icon" style="color: #1E9FFF;"></i>
                    </a>&nbsp;
                    <a href="javascript:;" onclick="edit({{.Name}})" title="修改配置">
                        <i class="layui-icon layui-icon-edit icon" style="color: #1E9FFF;"></i>
                    </a>&nbsp;
                    <a href="javascript:;" onclick="del({{.Name}})" title="删除配置">
                        <i class="layui-icon layui-icon-delete icon" style="color: #1E9FFF;"></i>
                    </a>&nbsp;
                    <a href="javascript:;" onclick="start({{.Name}})" title="启动服务">
                        <i class="layui-icon layui-icon-play icon" style="color: #00a65a;"></i>
                    </a>&nbsp;
                    <a href="javascript:;" onclick="stop({{.Name}})" title="停止服务">
                        <i class="layui-icon layui-icon-pause icon" style="color: #ff0e00;"></i>
                    </a>
                </div>
                <div class="layui-card-body">
                    <div class="layui-row">
                        <div class="layui-col-md6">
                            <label style="color: #00a65a">{{.Name}}</label>&nbsp;<br/>
                            <label style="color: #0078a6">监控地址：{{.ServerAddr}}</label><br/>
                            <label style="color: #3ea66c">应用位置：{{.AppAddr}}</label><br/>
                            <label style="color: #6ea667">日志位置：{{.LogsAddr}}</label><br/>
                            <label style="color: #ff4600">启动脚本位置：{{.RunAddr}}</label><br/>
                            <label style="color: #ff4600">停止脚本位置：{{.ShutdownAddr}}</label><br/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {{end}}
    </div>
</div>
<script src="/static/layui/layui.all.js"></script>
<script src="/static/js/func.js"></script>

<script>
    var $ = layui.$;
    var table = layui.table;
    var layer = layui.layer;

    function server() {
        layui.layer.open({
            type: 2,
            title: '<b>新增主机</b>',
            maxmin: true,
            area: ['700px', '550px'],
            shade: 0.3,
            btn: ['确认', '关闭'],
            btnAlign: 'c',
            moveType: 1,
            content: "/server",
            yes: function (index, layero) {
                var form = $($(layero).find('iframe')[0].contentWindow.document.forms[0]);
                Func.FormSubJson(form);
            }
        });
    }

    function edit(id) {
        layui.layer.open({
            type: 2,
            title: '<b>编辑主机</b>',
            maxmin: true,
            area: ['700px', '550px'],
            shade: 0.3,
            btn: ['确认', '关闭'],
            btnAlign: 'c',
            moveType: 1,
            content: "/server?id=" + id,
            yes: function (index, layero) {
                var form = $($(layero).find('iframe')[0].contentWindow.document.forms[0]);
                Func.FormSubJson(form);
            }
        });
    }

    function upload(id) {
        layui.layer.open({
            type: 2,
            title: '<b>' + id + '</b>',
            maxmin: true,
            area: ['600px', '400px'],
            shade: 0.3,
            moveType: 1,
            content: "/upload?id=" + id,
        });
    }

    function del(id) {
        layer.confirm('确认删除？', {
            btn: ['确认', '取消'] //按钮
        }, function () {
            Func.AjaxJson("post", "/del", {"id": id})
        });
    }

    function start(id) {
        layer.confirm('确认启动服务器？', {
            btn: ['确认', '取消'] //按钮
        }, function () {
            Func.AjaxJson("post", "/start?id=" + id, "")
        });
    }

    function stop(id) {
        layer.confirm('确认停止服务器？', {
            btn: ['确认', '取消'] //按钮
        }, function () {
            Func.AjaxJson("post", "/stop?id=" + id, "")
        });
    }

    function logs(id) {
        layui.layer.open({
            type: 2,
            title: "日志查看器",
            maxmin: true,
            area: ['90%', '90%'],
            shade: 0,
            moveType: 1,
            content: "/logs?id=" + id,
        });
    }
</script>
<script type="text/html" id="tab-bar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="upload">应用升级</a>
    <a class="layui-btn  layui-btn-xs" lay-event="find">日志监控</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="server">服务监控</a>
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="manager">管理</a>
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>
</body>
</html>